<load href="assets/fileinput/css/fileinput.css" />
<style type="text/css">
.file-preview-frame{
    height: 50px;
}   
.file-preview-image{
    height: 50px;
    cursor: pointer;
} 
.modal-body{
    padding: 0px;
}
</style>
<div class="tabbable">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active">
            <a data-toggle="tab" href="#home">文件上传</a>
        </li>
        <li class="tab-red">
            <a data-toggle="tab" href="#profile">文件选择</a>
        </li>
        <li class="tab-blue">
            <a ajax-url="{:U('FileManger/sc?t=icon')}" data-toggle="tab" href="#icon">图标</a>
        </li>
        <li class="tab-red">
            <a data-toggle="tab" href="#bg">封面</a>
        </li>

        <li class="tab-red">
            <a ajax-url="{:U('FileManger/sc?t=icon')}" data-toggle="tab" href="#iconMaker">图标制作</a>
        </li>
    </ul>

    <div class="tab-content">
        <div id="home" class="tab-pane in active">
            <input id="input-703" name="kartik-input-703[]" type="file" multiple class="file-loading">
        </div>

        <div id="icon" class="tab-pane">
            <include file="icon" />
        </div>
        <div id="iconMaker" class="tab-pane">
            <include file="iconMaker" />
        </div>
        <div id="bg" class="tab-pane">
            <include file="bg" />
        </div>
        <div id="profile" class="tab-pane">
        <div class="row">
            <volist name="attrs[volist]" id="att">
            <div class="file-preview-thumbnails">
                <div class="file-preview-frame" >
                    <img src="{$att.fpath}" class="file-preview-image"  >
                    <div class="file-thumbnail-footer">
                        <div class="file-caption-name" >{$att.originalName}</div>
                        <div class="file-actions">
                        <div class="file-footer-buttons">
                        <a data-pic="{$att.url}" class="file-select btn btn-xs btn-primary" ><i class="typcn typcn-tick"></i>
                        </a>
                        <a data-ajax href="{:U("FileManger/fileInputDelete?id=$att[id]")}" class="kv-file-remove btn btn-xs btn-danger" ><i class="typcn typcn-times"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            </volist>
        </div>
    </div>
</div>





<load href="assets/fileinput/js/fileinput.js" />
<load href="assets/fileinput/js/fileinput_locale_zhcn.js" />
<script type="text/javascript">
$(function(){
    $('.file-select').on('click',function(event){
        event.preventDefault();
        var fn = "{$Think.get.fname}";
        var pic = $(this).data('pic');
        if (fn) $('[name='+fn+']').val(pic);

        try {
            if (typeof(eval('fileMangerCall')) == "function") {
                fileMangerCall(pic);
            }
        } catch(e) {}


        BootstrapDialog.closeAll();
    })

    $('#input-703').fileinput({
        uploadAsync: true,
        uploadUrl: "{:U("FileManger/upfile?apid=$apid")}",
        allowedFileTypes: ["image"],
    });
})  
</script>
